// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at https://mozilla.org/MPL/2.0/.

@use '../../../m24/vars/lib' as *;

.m24-c-ar-article-image-block {
    display: grid;
    gap: $grid-gutter;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    margin: $spacer-lg 0 0;

    img {
        width: 100%;
        height: auto;
    }

    img:nth-child(1) {
        grid-column: 1/2;
        grid-row: 1/2;
    }

    img:nth-child(2) {
        grid-column: 2/-1;
        grid-row: 1/2;
    }

    img:nth-child(3) {
        grid-column: 1/2;
        grid-row: 2/2;
    }

    img:nth-child(4) {
        grid-column: 2/-1;
        grid-row: 2/2;
    }
}


@media #{$mq-sm} {
    .m24-c-ar-article-image-block {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(1, 1fr);

        img:nth-child(1) {
            grid-column: 1/2;
            grid-row: 1/1;
        }

        img:nth-child(2) {
            grid-column: 2/3;
            grid-row: 1/1;
        }

        img:nth-child(3) {
            grid-column: 3/4;
            grid-row: 1/1;
        }

        img:nth-child(4) {
            grid-column: 4/5;
            grid-row: 1/1;
        }
    }
}
